<script setup>
import { ref, reactive } from 'vue'
import {customer,updcustomer} from  '@/api/basi.js'
const checked1 = ref(true)

const form = reactive({
  customer_aes:'',
  customer_token:"",
  customer_secret:'',
  customer_status:'1',
  customer_callback_url:"",
})
const preservation = (val)=>{
  console.log(val)
  updcustomer({customer_token:form.customer_token,customer_aes:form.customer_aes,customer_secret:form.customer_secret}).then(res=>{
    ElMessage({
    message: res.msg,
    type: 'success',
  })
  })
}
const staffapi=()=>{
  customer().then(res=>{
    form.customer_status=res.data.customer_status 
    form.customer_secret=res.data.customer_secret
    // form.customer_status=res.data.customer_status
    form.customer_token=res.data.customer_token
    form.customer_aes=res.data.customer_aes
    form.customer_callback_url=res.data.staff_callback_url
  })
}
staffapi()
const abc =(val)=>{
  const range = document.createRange(); //创建range对象
	range.selectNode(document.getElementById(val)); //获取复制内容的 id 选择器
	const selection = window.getSelection();  //创建 selection对象
	if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
	selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
	document.execCommand('copy'); //复制选中的文字到剪贴板
	// this.$toast('复制成功')
  ElMessage({
    message: '复制成功',
    type: 'success',
  })
	selection.removeRange(range); // 移除选中的元素
}
defineExpose({
  preservation
})
</script>
<template>

  <div class="cardContent">
    <div class="cardTabTop">
      <div class="cardTabTop1"></div>
      <div class="cardTabTop2">密钥配置</div>
    </div>
    <div class="cardFormStyle">

      <el-form :model="form" label-width="120px" style="margin-top:-5px">
        <el-form-item label="客户联系配置">
          <!-- <el-checkbox v-model="form.customer_status" disabled :label="checked1 ? '正常' : '异常'" size="large" /> -->
          <img src="../../../assets/icon_no@2x.png" v-if=" form.customer_status == 0" /><span v-if=" form.customer_status == 0" style="margin-left: 7px;">异常</span>
          <img src="../../../assets/icon_yes@2x.png" v-if=" form.customer_status == 1" /><span v-if=" form.customer_status == 1" style="margin-left: 7px;">正常</span>
        </el-form-item>
        <el-form-item label="密钥Secret">
          <el-input v-model="form.customer_secret" />
        </el-form-item>
        <!-- <el-form-item label="立即执行同步">
          <el-switch v-model="form.sync" />
        </el-form-item> -->
      </el-form>
    </div>
  </div>
  <!-- 回调配置 -->
  <div class="cardContent">
    <div class="cardTabTop">
      <div class="cardTabTop1"></div>
      <div class="cardTabTop2">回调配置</div>
    </div>
    <!-- 正文 -->
    <div class="cardFormStyle2">
      <el-form :model="form" label-width="120px" style="margin-top:-5px">

        <el-form-item label="URL">
          <el-input id="urlvalue" disabled v-model="form.customer_callback_url" placeholder="https://demo.leadshop.vip/index.php?r=admin%2Findex#/store/color">
           <template #append><el-button style="background-color: #208eff;color: #ffffff;" @click="abc('urlvalue')">复制</el-button></template>
          </el-input>
        </el-form-item >

         <el-form-item label="Token">
          <el-input id="tokent" disabled v-model="form.customer_token" placeholder="admin%2Findex#/store/color">
           <template #append><el-button style="background-color: #208eff;color: #ffffff;" @click="abc('tokent')">复制</el-button></template>
          </el-input>
        </el-form-item >

         <el-form-item label="EncodingAESKey">
          <el-input id="user_aes" disabled v-model="form.customer_aes" placeholder="?r=admin%2Findex#/store/color">
            <template #append><el-button style="background-color: #208eff;color: #ffffff;" @click="abc('user_aes')">复制</el-button></template>
          </el-input>
        </el-form-item >
        
      </el-form>
    </div>
  </div>


</template>
<style scoped>
.cardContent {
  background: #FFFFFF;
  margin-top: 20px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.0400);
  border-radius: 8px;
}

.el-form-item {
  margin-bottom: 24px;
}

.cardTabTop {
  height: 66px;
  display: flex;
  margin-left: 25px;
  margin-top: 24px;
  padding-top: 23px;
  justify-content: flex-start;
}

.cardTabTop1 {
  width: 4px;
  height: 14px;
  background: #208EFF;
}

.cardTabTop2 {
  width: 56px;
  height: 14px;
  margin-left: 5px;
  font-size: 14px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #333333;
  line-height: 14px;
}
.cardFormStyle{
  width: 440px;
  padding-bottom: 24px;
  margin-left: 115px;
}
.cardFormStyle2{
  width: 680px;
  padding-bottom: 24px;
  margin-left: 115px;
}



/* :deep(  .el-checkbox__label + .el-checkbox__inner){
  margin-top: -8px;
  color: #15b33c;
 } */
:deep(.el-checkbox__label) {
  font-size: 16px;
  font-weight: 500;
  margin-top: -6px;

}

:deep(.el-checkbox__input) {
  margin-top: -6px;
}
</style>